<template>
  <div
    style="
      box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      height: 100vh;
    "
  >
  <div>
    <Header
        title="训练系统 "
      />
  </div>
  <div style="  
        display: flex;  
        justify-content: center;  
        align-items: center;
        height:5vh;  
      " >
      <el-button @click="showDiv = 'div1'" :style="{ color: showDiv === 'div1' ? 'rgb(255, 60, 0)' : '' }" style="margin-right:8vw; font-size:2vw" type="text"> 声音和显示</el-button>
      <el-button @click="showDiv = 'div2'" :style="{ color: showDiv === 'div2' ? 'rgb(255, 60, 0)' : '' }" style=" font-size:2vw" type="text">隐私与系统</el-button>

  </div>
    <div class="settings-body" v-if="showDiv === 'div1'">
      <div class="setting-item">
        <div class="setting-icon">
          <img src="@\assets\imgs\声音.png" alt="1" />
        </div>
        <span class="setting-label">声音设置</span>
      </div>
      <div class="setting-item">
        <div class="setting-icon">
          <img src="@\assets\imgs\显示.png" alt="1" />
        </div>
        <span class="setting-label">显示设置</span>
      </div>
      <div class="setting-control">
        <div class="control-label">音量</div>
        <div class="control-value" style="color:rgb(255, 60, 0)">{{value1}}</div>
      </div>
      <div class="setting-control">
        <div class="control-label">亮度</div>
        <div class="control-value" style="color:rgb(255, 60, 0)">{{value2}}</div>
      </div>
      <div class="setting-control">
        <el-slider v-model="value1"  />
      </div>
      <div class="setting-control">
        <el-slider v-model="value2" />
      </div>
      <div class="setting-control">
        <div class="control-label">语音设置</div>
        <div class="control-value" style="color:rgb(255, 60, 0)">优美男生</div>
      </div>
      <div class="setting-control">
        <div class="control-label">字体</div>
        <div class="control-value" style="color:rgb(255, 60, 0)">简体中文</div>
      </div>
      <div class="setting-control">
        <div class="control-label">按键声音</div>
        <div class="control-value" style="color:rgb(255, 60, 0)" >叮咚声</div>
      </div>
    </div>

    <div class="settings-body1" v-if="showDiv === 'div2'">
      <div class="content1">
        <div class="icon-container1">
          <img src="@\assets\imgs\系统.png" alt="系统图标" />
        </div>
        <div class="settings-title1">系统设置：</div>
      </div>
      <div class="content1">当前版本信息：优化了训练内容</div>

      <div class="version-details1">
        <div class="version-label1">版本号：</div>
        <div class="version-value1" style="color: rgb(255, 60, 0)">V2.0.8</div>
      </div>

      <div class="content1">新版本检测</div>
      <div class="content1" style="color: rgb(255, 60, 0)">手动更新</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import Header from "@/components/titleHeader/TitleHeader.vue";

const value1 = ref(0)
const value2 = ref(0)

const showDiv = ref('div1');
</script>

<style  scoped>
.settings-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-gap: 10px 60px; */
  border: 1px solid rgba(255, 255, 255, 0.5);

  backdrop-filter: blur(5px);
}
.setting-item {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0px 43px;
}
.setting-icon {
  width: 40px;
  height: 40px;
  background-color: rgb(255, 60, 0);
  margin-right: 10px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.setting-icon img {
  width: 23px;
  height: 23px;
}
.setting-control {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 50px;
}
.settings-body1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-gap: 10px 60px; */
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}
.content1 {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0px 43px;
}

.icon-container1 {
  width: 40px;
  height: 40px;
  background-color: rgb(255, 60, 0);
  margin-right: 10px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-container1 img {
  width: 23px;
  height: 23px;
}

.version-details1 {
  height: 70px;
  display: flex;

  align-items: center;
  padding: 0px 43px;
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>